<template>
  <div>
    <div class="list">
      <el-tabs v-model="activeName" class="list-tabs" @tab-change="handleClick">
        <div class="header">
          <div class="header-line1 flex-s">
            <el-button type="primary" @click="onOperation({}, 'add')"
              >新建</el-button
            >
          </div>
        </div>
        <el-tab-pane label="供应商/商品/专家类型" :name="1">
          <div class="content content-table">
            <el-table
              ref="multipleTableRef"
              row-key="id"
              :data="list"
              style="width: 100%"
            >
              <el-table-column
                property="dicLabel"
                label="名称"
                align="center"
              />
              <el-table-column label="图标" width="100" align="center">
                <template #default="scope">
                  <img
                    style="width: 30px; height: 30px; border-radius: 50%"
                    v-if="scope.row.tupian && scope.row.tupian.length > 0"
                    :src="scope.row.tupian[0].filePath"
                    alt=""
                  />
                </template>
              </el-table-column>
              <el-table-column label="创建时间" align="center">
                <template #default="scope">
                  {{ scope.row.fixed.code === 1 ? "-" : scope.row.createTime }}
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="250"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    style="min-width: auto"
                    link
                    type="primary"
                    size="small"
                    v-if="
                      scope.row.fixed.code !== 1 && scope.row.dicLevel !== 3
                    "
                    @click.prevent="addChildren(scope.row, 'add')"
                    >添加子类型</el-button
                  >
                  <el-button
                    style="min-width: auto"
                    link
                    type="primary"
                    size="small"
                    v-if="scope.row.fixed.code !== 1"
                    @click.prevent="onOperation(scope.row, 'edit')"
                    >编辑</el-button
                  >
                  <el-button
                    style="min-width: auto"
                    link
                    type="primary"
                    size="small"
                    v-if="scope.row.fixed.code !== 1"
                    @click="onOperation(scope.row, 'delete')"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="联合体类型" :name="2">
          <div class="content content-table">
            <el-table
              ref="multipleTableRef"
              row-key="id"
              :data="list"
              style="width: 100%"
            >
              <el-table-column
                property="dicLabel"
                label="名称"
                align="center"
              />
              <el-table-column label="创建时间" align="center">
                <template #default="scope">
                  {{ scope.row.fixed.code === 1 ? "-" : scope.row.createTime }}
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="250"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    style="min-width: auto"
                    link
                    type="primary"
                    size="small"
                    v-if="
                      scope.row.fixed.code !== 1 && scope.row.dicLevel !== 2
                    "
                    @click.prevent="addChildren(scope.row, 'add')"
                    >添加子类型</el-button
                  >
                  <el-button
                    style="min-width: auto"
                    link
                    type="primary"
                    size="small"
                    v-if="scope.row.fixed.code !== 1"
                    @click.prevent="onOperation(scope.row, 'edit')"
                    >编辑</el-button
                  >
                  <el-button
                    style="min-width: auto"
                    link
                    type="primary"
                    size="small"
                    v-if="scope.row.fixed.code !== 1"
                    @click="onOperation(scope.row, 'delete')"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div></el-tab-pane
        >
        <el-tab-pane label="专家职称" :name="3">
          <div class="content content-table">
            <el-table ref="multipleTableRef" :data="list" style="width: 100%">
              <el-table-column
                property="dicLabel"
                label="名称"
                align="center"
              />
              <el-table-column label="创建时间" align="center">
                <template #default="scope">
                  {{ scope.row.fixed.code === 1 ? "-" : scope.row.createTime }}
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="250"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    style="min-width: auto"
                    link
                    type="primary"
                    size="small"
                    v-if="scope.row.fixed.code !== 1"
                    @click.prevent="onOperation(scope.row, 'edit')"
                    >编辑</el-button
                  >
                  <el-button
                    style="min-width: auto"
                    link
                    type="primary"
                    size="small"
                    v-if="scope.row.fixed.code !== 1"
                    @click="onOperation(scope.row, 'delete')"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-dialog
        class="list-dialog"
        show-close="false"
        width="40%"
        v-model="show"
        center
        style="padding: 0 30px"
      >
        <p class="title">{{ type === "add" ? "新建" : "编辑" }}：</p>
        <el-form v-if="activeName === 1" :model="form1">
          <el-form-item>
            <div class="top-bottom">
              <p class="item-title">名称：</p>
              <el-col :span="12">
                <el-input size="large" v-model="form1.dicLabel" />
              </el-col>
            </div>
          </el-form-item>
          <el-form-item v-if="isParent">
            <div class="top-bottom">
              <p class="item-title">图标：</p>
              <el-col :span="12">
                <bjz-oss
                  :previewList="form1.tupian"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="success"
                  @remove="remove"
                />
              </el-col>
            </div>
          </el-form-item>
          <el-form-item class="button-group">
            <el-button size="large" @click="show = false">取消</el-button>
            <el-button
              class="ml50"
              size="large"
              type="primary"
              @click="submitForm"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
        <el-form v-if="activeName === 2" :model="form2">
          <el-form-item>
            <div class="top-bottom">
              <p class="item-title">名称：</p>
              <el-col :span="12">
                <el-input size="large" v-model="form2.dicLabel" />
              </el-col>
            </div>
          </el-form-item>
          <el-form-item class="button-group">
            <el-button size="large" @click="show = false">取消</el-button>
            <el-button
              class="ml50"
              size="large"
              type="primary"
              @click="submitForm"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
        <el-form v-if="activeName === 3" :model="form3">
          <el-form-item>
            <div class="top-bottom">
              <p class="item-title">名称：</p>
              <el-col :span="12">
                <el-input size="large" v-model="form3.dicLabel" />
              </el-col>
            </div>
          </el-form-item>
          <el-form-item class="button-group">
            <el-button size="large" @click="show = false">取消</el-button>
            <el-button
              class="ml50"
              size="large"
              type="primary"
              @click="submitForm"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  GetDictionaryTree,
  AddDictionary,
  DeleteDictionary,
  EditDictionary,
} from "@/api/system";
import { baseMsg, elMessageTip } from "@/utils/utils";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      activeName: 1,
      dicModel: "gongyingshangpinzhuanjialeixing",
      list: [],
      show: false,
      // 是否是添加的一级标签
      isParent: true,
      type: "add",
      form1: {
        dicLabel: "",
        dicModel: "gongyingshangpinzhuanjialeixing",
        tupian: [],
      },
      form2: {
        dicLabel: "",
        dicModel: "lianhetileixing",
      },
      form3: {
        dicLabel: "",
        dicModel: "zhuanjiazhicheng",
      },
    });

    const GetList = async () => {
      const res = await GetDictionaryTree({ dicModel: state.dicModel });
      state.list = res.data;
    };
    const handleClick = () => {
      switch (state.activeName) {
        case 1:
          state.dicModel = "gongyingshangpinzhuanjialeixing";
          break;
        case 2:
          state.dicModel = "lianhetileixing";
          break;
        case 3:
          state.dicModel = "zhuanjiazhicheng";
          break;
      }
      GetList();
    };
    // 图片上传
    const success = (res) => {
      state.form1.tupian.push(res);
    };
    // 上传文件删除
    const remove = (index) => {
      state.form1.tupian.splice(index, 1);
    };
    // 提交表格
    const submitForm = async () => {
      // 新增
      if (state.type === "add") {
        const res = await AddDictionary(state[`form${state.activeName}`]);
        if (res.code == 4202) {
          baseMsg("新建成功");
        } else {
          baseMsg("新建失败");
        }
      } else if (state.type === "edit") {
        const res = await EditDictionary(state[`form${state.activeName}`]);
        if (res.code == 4202) {
          baseMsg("编辑成功");
        } else {
          baseMsg("编辑失败");
        }
      }
      GetList();
      state.show = false;
    };
    // 添加子类型
    const addChildren = (params, type) => {
      state.isParent = false;
      state.type = type;
      if (
        state[`form${state.activeName}`].dicId ==
          "gongyingshangpinzhuanjialeixing" ||
        state[`form${state.activeName}`].dicId == "lianhetileixing"
      ) {
        state[`form${state.activeName}`].dicId = "";
      }
      if (state[`form${state.activeName}`].id) {
        delete state[`form${state.activeName}`].id;
      }
      state[`form${state.activeName}`].dicId = params.dicValue;
      state[`form${state.activeName}`].dicLabel = "";
      state.show = true;
    };
    // 操作
    const onOperation = (params, operation) => {
      if (operation === "delete") {
        elMessageTip({
          ok() {
            DeleteDictionary({
              id: params.id,
            }).then((res) => {
              if (res.code == 4202) {
                baseMsg("删除成功");
                GetList();
              }
            });
          },
        });
      } else {
        state.show = true;
        state.type = operation;
        if (operation === "add") {
          state.isParent = true;
          state[`form${state.activeName}`].dicId = "";
          state[`form${state.activeName}`].dicLabel = "";
          state.form1.tupian = [];
        }
        if (operation === "edit") {
          state[`form${state.activeName}`] = params;
          // 一级菜单的情况下
          if (
            state[`form${state.activeName}`].dicId ==
              "gongyingshangpinzhuanjialeixing" ||
            state[`form${state.activeName}`].dicId == "lianhetileixing" ||
            state[`form${state.activeName}`].dicId == "zhuanjiazhicheng"
          ) {
            state[`form${state.activeName}`].dicId = "";
          }
        }
        GetList();
      }
    };
    watch(
      () => route.query,
      () => {
        GetList();
      },
      { deep: true }
    );
    GetList();
    return {
      ...toRefs(state),
      GetList,
      onOperation,
      handleClick,
      addChildren,
      submitForm,
      success,
      remove,
    };
  },
});
</script>
<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
}
.content {
  border: none !important;
  background-color: transparent !important;
}
</style>
<style lang="scss">
.list {
  .list-tabs .el-tabs__header {
    background-color: #f2f2f2;
    margin-top: 10px;
    padding-bottom: 20px;
    .el-tabs__active-bar {
      display: none;
    }
    .el-tabs__nav-wrap {
      &::after {
        display: none;
      }
    }
    .el-tabs__nav .el-tabs__item {
      font-size: 22px !important;
    }
  }
  .el-tabs__content {
    padding: 10px 30px;
  }

  .el-dialog {
    .el-dialog__header {
      display: none;
    }
  }
  .title {
    font-size: 25px;
    margin-bottom: 30px;
  }
  .el-form {
    .top-bottom {
      width: 100%;
      .item-title {
        font-weight: bold;
      }
    }
    .button-group {
      margin-top: 40px;
      .el-form-item__content {
        justify-content: center;
      }
    }
  }
}
</style>
